<script setup>
import { provide, ref } from 'vue';
import OptionAPI from '@/components/OptionsAPI.vue'
import CompositionAPI from './components/CompositionAPI.vue';
import AttributeBind from './components/AttributeBind.vue';
import VueRender from './components/VueRender.vue';
import VueOnEvent from './components/VueOnEvent.vue';
import VueModel from './components/VueModel.vue';
import VueLifeLine from './components/VueLifeLine.vue';
import VueCite from './components/VueCite.vue';
import VueProps from './components/VueProps.vue';
import VueProvideInject from './components/VueProvideInject.vue';
import VueAsync from './components/VueAsync.vue';
import VueTransition from './components/VueTransition.vue';


const count = ref(0)

const changeCount = () => {
  count++
}
const disabledFlag = ref(true)


const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green;font-size:20px;width:max-content;margin:20px 0'
}

const number = ref(10)
const ok = ref(true)
const message = ref("hello,world")

const url = ref("wwww.baidu.com")
const changeUrl = () =>{
  url.value = "www.google.com"
}


const count1 = ref(2)
// console.log(count1)
// console.log(count1.value)
count1.value++
// console.log(count1)
// console.log(count1.value)


provide("username","spb")
provide("password","123456")

</script>

<template>
  <VueTransition></VueTransition>
  <VueAsync></VueAsync>
  <VueProvideInject></VueProvideInject>
  <VueProps></VueProps>
  <VueCite></VueCite>
  <VueLifeLine></VueLifeLine>
  <VueModel></VueModel>
  <VueOnEvent></VueOnEvent>
  <VueRender></VueRender>
  <AttributeBind></AttributeBind>
  <CompositionAPI></CompositionAPI>
  <OptionAPI></OptionAPI>

  <h1>HelloWorld</h1>
  <h2>{{ count }}</h2>
  <button @click="changeCount()">changeCount++</button>
  <p>Using text interpolation:{{ count }}</p>
  <p>Using v-html directive: <span v-html="count"></span></p>
  
  <!-- <div v-bind:id="dynamicId">1</div>
  <div :id="dynamicId">1</div> -->

  <button :disabled=disabledFlag >Diabled</button>

  <div v-bind="objectOfAttrs">hello,world</div>

  <button @click="ok = !ok">ChangeOk</button>

  {{ number + 1 }}

  {{ ok ? 'YES' : 'NO' }}

  {{ message.split('').reverse().join('') }}

  <!-- {{ var a = 1 ; return 10 }} -->
  <!-- {{ if(ok) {return message} }} -->

  <div v-if="ok">Now you see me</div> 

  <a v-bind:href="url">{{ url }}</a> <br>
  <button v-on:click="changeUrl()">ChangeUrl</button>

</template>

<style scoped>

</style>
